<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2024/3/13
  Time: 20:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <script>
        function checkUsername() {
            let username = document.getElementById("username").value;
            // document.getElementById("s1").innerHTML = "准备校验";
            // 1.获取Ajax引擎
            let xhr = new XMLHttpRequest();

            // 2.准备回调函数,其值是一个函数类型
            // 回调函数:返回响应之后调用的函数
            // xhr.onreadystatechange=callback;
            xhr.onreadystatechange = function () {
                // 对于Ajax请求,存在5种状态
                // 获取ajax请求状态
                console.log("ajax请求状态:" + xhr.readyState)
                // 获取Http请求状态
                console.log("Http请求状态:" + xhr.status)
                // 在回调函数中,一般只在响应返回之后且成功响应时才需要获取响应数据
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 获取服务器返回的数据
                    let result = xhr.responseText;
                    document.getElementById("s1").innerHTML = result;
                }
            }

            // get请求
            // 3.建立连接,建立与服务器的连接
            // 即:指定调用的请求是谁
            // 参数一:请求方式
            // 参数二:请求地址
            // 参数三:是否异步。true:异步,false:同步
            // xhr.open("get","${pageContext.request.contextPath}/checkUsername?username="+username);

            // 4.发送请求
            // 如果请求没有额外参数,则直接写null
            // 由于get请求的参数一般在url地址中直接传递
            // 因此,对于get请求,此处的参数值一般均为null
            // 如果post请求,此处的参数值一般是get请求中url地址中?后面的内容
            // xhr.send(null);

            // post请求
            xhr.open("post", "${pageContext.request.contextPath}/checkUsername", true);
            // 对于post请求,需要指定请求参数的传输方式,使用表单数据的方式进行传输
            // 通过Content-Type属性指定
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send("username=" + username);
        }

        function callback() {

        }
    </script>
</head>
<body>
<h1>用户注册</h1>
<hr>
<form action="#" method="post">
    用户名:<input type="text" id="username" name="username" onblur="checkUsername()"><span id="s1"></span><br>
    密&nbsp;&nbsp;&nbsp;码:<input type="password" name="password"><br>
    电&nbsp;&nbsp;&nbsp;话:<input type="text" name="phone"><br>
    地&nbsp;&nbsp;&nbsp;址:<input type="text" name="address"><br>
    <input type="submit" value="注册">
</form>
</body>
</html>
